<template>
	<div class="top-bar">
		<div class="top-bar-l">
			<a href="javascript:" class="top-bar-link">
				<!-- <img src="../assets/icons/logo.png" /> -->
				<b>深哥家具</b>
			</a>
			<!-- <router-link to="/data" class="top-bar-link" style="min-width: auto; background-color: #000;">数据中控台</router-link> -->
			<el-button style="margin-top: 4px;" v-if="admin_id==1||admin_id == 8 || admin_id == 9" @click="$router.push({path: '/data'})">数据中控台</el-button>
		</div>
		<div class="top-bar-r">
			<a href="javascript:;" class="top-bar-link" @click="fullScreen"><i class="iconfont icon-quanping"></i></a>
			<a href="javascript:;" class="color-view top-bar-link">
				<i class="iconfont icon-theme" :style="{ color: color }"></i>
				<themePicker></themePicker>
			</a>
			<a href="javascript:;" class="top-bar-link">
				<i class="iconfont icon-xingmingyonghumingnicheng"></i>
				账号：{{ user_name }}
			</a>
			<a href="javascript:;" class="top-bar-link">
				<i class="iconfont icon-id" style="font-size: 22px;"></i>
				ID：{{ user_id }}
			</a>
			<el-badge :value="total" :max="99" class="item" v-if="admin_id == 6">
				<a href="javascript:;" class="top-bar-link" @click="goMessage">
					<i class="iconfont icon-dkw_xiaoxi"></i>
					信息
				</a>
			</el-badge>
			<a href="javascript:;" class="top-bar-link">
				<i class="iconfont icon-guanliyuan"></i>
				{{ adminName }}
			</a>
			<a href="javascript:;" class="top-bar-link" @click="logoutBtn()">
				<i class="iconfont icon-tuichudenglu"></i>
				退出登录
			</a>
		</div>
		<div class="m-menu" @click="showMmenu">
			<i class="el-icon-minus"></i>
			<i class="el-icon-minus"></i>
			<i class="el-icon-minus"></i>
		</div>
	</div>
</template>

<script>
import themePicker from '@/components/ThemePicker';
export default {
	components: {
		themePicker
	},
	data() {
		return {
			admin_id: localStorage.getItem('admin_id'),
			user_name: localStorage.getItem('user_name'),
			user_id: localStorage.getItem('user_id'),
			isFullscreen: false,
			adminName: '',
			color: '',
			total:0
		};
	},
	created() {
		this.getMessage()
		let power = [];
		this.adminName = localStorage.getItem('adminName');
	},
	methods: {
		getMessage(){
			if(this.admin_id ==6){
				this.$http(this.$ApiList.TidingsNum).then(res => {
					this.total = res.datas;
				});
			}
		},
		// PC退出登陆
		logoutBtn() {
			this.$confirm('是否退出当前账号?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					localStorage.removeItem('token')
					this.$layer.msg('退出成功');
					setTimeout(() => {
						this.$router.replace({ path: '/' });
					}, 1500);
				})
				.catch(() => {
					// 取消
				});
		},
		// 点击显示移动端导航
		showMmenu() {
			this.$emit('showMmenu', true);
		},
		fullScreen() {
			let el = document.documentElement;
			if (this.isFull) {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			} else {
				if (el.requestFullscreen) {
					el.requestFullscreen();
				} else if (el.mozRequestFullScreen) {
					el.mozRequestFullScreen();
				} else if (el.webkitRequestFullScreen) {
					el.webkitRequestFullScreen();
				} else if (el.msRequestFullscreen) {
					el.msRequestFullscreen();
				}
			}
		},
		goMessage() {
			this.$router.push({ path: '/message_list' });
		},
		colorSelect() {
			localStorage.setItem('color', this.color);
		},
		setColor(val) {
			this.color = val;
		}
	},
	mounted() {
		let isFullscreen =
			document.fullscreenElement ||
			document.mozFullScreenElement ||
			document.webkitFullscreenElement ||
			document.fullScreen ||
			document.mozFullScreen ||
			document.webkitIsFullScreen;
		isFullscreen = !!isFullscreen;
		let that = this;
		document.addEventListener('fullscreenchange', () => {
			that.isFull = !that.isFull;
		});
		document.addEventListener('mozfullscreenchange', () => {
			that.isFull = !that.isFull;
		});
		document.addEventListener('webkitfullscreenchange', () => {
			that.isFull = !that.isFull;
		});
		document.addEventListener('msfullscreenchange', () => {
			that.isFull = !that.isFull;
		});
	}
};
</script>

<style>
.color-view {
	position: relative;
}
.color-view .el-color-picker {
	position: absolute;
	left: 10px;
	top: 10px;
	height: 50px;
}
.color-view .el-color-picker__trigger,
.color-view .el-color-picker__color {
	border: none;
}
.color-view .el-color-picker__color-inner {
	background-color: transparent !important;
}
.color-view .el-color-picker__icon {
	display: none;
}
.top-bar .el-badge__content.is-fixed {
    top: 15px;
    right: 23px;
}
</style>
